<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>今日生机论坛--用户登录页面</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="icon" href="../favicon.ico">

    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

	<style>
		body{
			background: url(../img/backgroundPicture/backgroundPicture01.jpeg) no-repeat ;
			background-size: cover;
		}
	</style>

</head>
<body>
<div class="container">
    <div class="row">
        <div class="offset-4 col-4 border rounded bg-white shadow-lg" style="transform: translateY(50%);">
			<div>
				<a href="#"><img src="../img/logo/logo.png" alt=""></a>
			</div>
            <form role="form" id="form">
                <div class="form-group">
                    <label for="name">用户名</label>
                    <input type="text" class="form-control" id="name" placeholder="请输入用户名" name="userName">
                </div>
                <div class="form-group">
                    <label for="password">密码</label>
                    <input type="password" class="form-control" id="password" placeholder="请输入密码" name="userPassword">
                </div>
                <div class="form-group text-center">
                    <button type="submit" class="btn btn-primary">登录</button>&emsp;&emsp;
                    <a href="/test/register" class="btn btn-danger">注册</a>
                </div>
            </form>
        </div>
    </div>
</div>
<script>
    $('#form').submit(function (e) {
        // 阻止表单的提交和页面的跳转
        e.preventDefault();

        $.ajax({
            url: '/user/login',
            method: "POST",
            data: JSON.stringify(form2Json($("#form").serialize())),
            contentType: "application/json",
            success: function (returnObject) {
                if (returnObject.code=="1") {
                    window.location.href = "/user/logon";
                    // alert("success");
                } else {
                    alert(returnObject.message + ",请重新登录！");
                }
            }
        });

    });
// ?username=tom&password=tom转{"username":"tom","password":"tom"}格式
    function form2Json(str) {
        var arr = str.split('&');
        var obj = {};
        for (var i = 0; i < arr.length; i++) {
            var bits = arr[i].split('=');
            obj[bits[0]] = bits[1];
        }
        str = '';
        for (key in obj) {
            str += key + '=' + obj[key] + '&';
        }
        str = str.slice(0, str.length - 1);
        return obj;
    }
</script>
</body>
</html>
